<template>
	<view class="cal-content">
		<cu-custom :isBack="true" :isWhiteBack="true" style="background-color: transparent;">
			<block slot="backText"></block>
		</cu-custom>
		<image class="issue_bg" src="https://txr001.zthj.net/voucher_img/bg.png"></image>
		<view class="issue_mina">
			<view class="tops">
				<image src="https://txr001.zthj.net/voucher_img/issue_top_img.png"></image>
				<view class="ids">ID:{{info.code}}</view>
				<view class="titles">{{info.title}}</view>
				<view class="seebnt"  @click="preview">查看</view>
			</view>
			<view class="issue_list">
				<view class="issue_list_title">外部发放</view>
				<view class="without">
					<button open-type="share" class="withoutlist">
						<image class="lefticon" src="https://txr001.zthj.net/voucher_img/transmit.png" ></image>
						<view>转发给微信好友</view>
						<image class="righticon" src="https://txr001.zthj.net/voucher_img/rgiht_icon.png" ></image>
					</button>
					<view class="withoutlist" @click="toMakePoster">
						<image  class="lefticon" src="https://txr001.zthj.net/voucher_img/placard.png"></image>
						<view>制作二维码海报</view>
						<image class="righticon" src="https://txr001.zthj.net/voucher_img/rgiht_icon.png" ></image>
					</view>
				</view>
				<view class="issue_list_title">内部发放</view>
				<view class="interior">
					<view class="completed_title" @click="nocompleted=!nocompleted">
						<image src="https://txr001.zthj.net/voucher_img/object.png"></image>
						<view class="titles">选择链接对象</view>
						<view class="titles_rgiht" ><text>共有 {{userList.length}}</text><image :class="{'titles_rgihtok':!nocompleted,'titles_rgihtno':nocompleted}" src="https://txr001.zthj.net/voucher_img/top_icon.png"></image></view>
					</view>
					<view class="main_list" v-if="nocompleted">
						<view class="interior_title">
							<view @click="arrcheckfn()">全选</view>
							<view>已选 {{filteredArr.length}}</view>
						</view>
						<view class="checkstyle" v-for="(item,index) in userList" :key="index" @click="checkfn(index)">
							<image :src="item.isok?'https://txr001.zthj.net/voucher_img/check_ok.png':'https://txr001.zthj.net/voucher_img/check_no.png'"></image>
							<view class="check_right">
								<view class="check_title">{{item.nickname}}</view>
								<view class="check_paratext">{{item.company_name}}</view>
							</view>
						</view>
						<!--view class="openNotification">
							<view class="notificationTitle">开启通知 <text>(三个免费，超过三个开始收费)</text></view>
							<view class="notificationlist" v-for="(item,index) in notificationlist" :key="index" @click="notificationfn(index)">
								<image :src="item.isok?'https://txr001.zthj.net/voucher_img/check_ok.png':'https://txr001.zthj.net/voucher_img/check_no.png'"></image>
								<view class="check_title">{{item.title}}</view>
								<view class="check_paratext">{{item.paratext}}</view>
							</view>
							<view class="selectPayment">
								<view class="selectPaymentTitle">选择支付方式</view>
								<view class="selectlist" @click="radiofn(1)">
									<image :src="isRadio?'https://txr001.zthj.net/voucher_img/single_ok.png':'https://txr001.zthj.net/voucher_img/single_no.png'"></image>
									<view class="select_title">微信支付</view>
									<view class="select_nmber">￥10</view>
								</view>
								<view class="selectlist" @click="radiofn(2)">
									<image :src="!isRadio?'https://txr001.zthj.net/voucher_img/single_ok.png':'https://txr001.zthj.net/voucher_img/single_no.png'"></image>
									<view class="select_all">
										<view class="selectpays">
											<view class="selectpays_title">数据能量支付</view>
											<view class="selectpays_nmber">100</view>
										</view>
										<view class="selectpayfu">
											<view>账户数据能量(余额)</view>
											<view>1000</view>
										</view>
									</view>
								</view>
							</view>
						</view-->
						<view class="apystyle" @click="apply">发放</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
                s_id:0,
                info:{},
				nocompleted:true,
                userList: [],
				checklist:[
					{isok:false,title:"数据供应商1",paratext:"副文本描述副文本描述副文本描述副文本描述"},
					{isok:false,title:"数据供应商2",paratext:"副文本描述副文本描述副文本描述副文本描述"},
					{isok:false,title:"数据供应商3",paratext:"副文本描述副文本描述副文本描述副文本描述"},
					{isok:false,title:"数据供应商4",paratext:"副文本描述副文本描述副文本描述副文本描述"}
				],
				isarrcheck:false,
				filteredArr:[],
				notificationlist:[
					{isok:false,title:"微信公众号推送",paratext:"人民币每条0.1元，数据能量每条10"},
					{isok:false,title:"语音通知",paratext:"人民币每条0.1元，数据能量每条10"},
					{isok:false,title:"短信通知",paratext:"人民币每条0.1元，数据能量每条10"},
					{isok:false,title:"邮件通知",paratext:"人民币每条0.1元，数据能量每条10"}
				],
				isRadio:false

			}
		},
		onLoad(res) {
            if(!res.s_id){
                uni.showModal({content:'参数错误',showCancel:false,success(){uni.navigateBack();return;}})
            }
            this.s_id = res.s_id;
		    this.load()
		    this.user()
		},
		methods:{
			// 制作海报
			toMakePoster(){
				uni.navigateTo({
					url:"/pages/index/shareImg?s_id="+this.s_id
				})
			},
            async load(){
                let res = await this.$api.statisticsInfo({s_id: this.s_id})
                this.info = res.data.info
            },
            async user(){
                let res = await this.$api.companyUser()
                this.userList = res.data
            },
            preview(){
                uni.navigateTo({
                    url:"/subpackage/pages/voucher/edit?onlyread=1&type="+(this.info.type == 1 ? 2 : 1)+ "&id="+this.info.s_id
                })
            },
		   checkfn(index){
			   this.userList[index].isok=!this.userList[index].isok
			   this.compute()
		   },
		   notificationfn(index){
			     this.notificationlist[index].isok=!this.notificationlist[index].isok
		   },
		   arrcheckfn(){
			   this.isarrcheck=!this.isarrcheck
			   this.userList.forEach(itme =>{
				   itme.isok= this.isarrcheck
			   })
			   this.compute()
		   },
		   compute(){
			  this.filteredArr = this.userList.filter(item => item.isok === true).map(({ id }) => id);
		   },
           async apply(){
                let res = await this.$api.sendStatistics({
                    s_id : this.s_id,
                    uids : this.filteredArr
                })
               uni.showToast({title: res.msg})
               if(res.code == 1){
                   uni.navigateBack();
               }
            },
		   radiofn(type){
			   if(type==1){
				    this.isRadio=true
			   }else{
				    this.isRadio=false
			   }
		   },
            onShareAppMessage() {
                return {
                    title: '邀请您参与:' + this.info.title,
                    path: `/pages/index/questionGrant?s_id=` + this.info.s_id,
                }
            },
		}
	}
</script>

<style lang="less" scoped>
	.cal-content{
		position: relative;
		.issue_bg{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			height: 370rpx;
		}
		.issue_mina{
			padding: 32rpx;
			.tops{
				width: 100%;
				height: 278rpx;
				position: relative;
				padding-left: 32rpx;
				padding-top: 32rpx;
				margin-bottom: 48rpx;
				image{
					position: absolute;
					left:0;
					top:0;
					right:0;
					bottom:0;
				    width: 100%;
					height: 100%;
				}
				.ids{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #010101;
					line-height: 28rpx;
					position: relative;
				}
				.titles{
					font-size: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #010101;
					line-height: 47rpx;
					margin-top: 16rpx;
					margin-bottom: 40rpx;
					position: relative;
					word-wrap: break-word;
					word-break: break-all;
				}
				.seebnt{
					width: 160rpx;
					height: 56rpx;
					background: #24458E;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					position: relative;
				}
			}
			.issue_list{
				.issue_list_title{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #010101;
					line-height: 28rpx;
					margin-bottom: 24rpx;
				}
				.without{
					padding-left: 32rpx;
					background: #FFFFFF;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					margin-bottom: 48rpx;
					.withoutlist{
                        border:0!important;
                        text-align: left;
                        border:0;
                        background: #fff;
						display: flex;
						padding: 50rpx 0;
						align-items: center;
						padding-right: 32rpx;
                        &::after{
                            border:0;
                        }
						&:last-child{
							border-top: 2rpx solid #D9D9D9!important;
						}
						.lefticon{
							width: 40rpx;
							height: 40rpx;
							display: block;
							margin-right: 24rpx;
						}
					    view{
							flex: 1;
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #010101;
							line-height: 38rpx;
						}
						.righticon{
							width: 32rpx;
							height: 32rpx;
							display: flex;
						}
					}
				}
				.interior{
					background: #FFFFFF;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					padding: 32rpx 0;
					margin-bottom: 32rpx;
					.completed_title{
						padding-bottom: 8rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #D9D9D9;
						padding: 0 32rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 24rpx;
						}
						.titles{
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							color: #010101;
							line-height: 50rpx;
							flex: 1;
						}
						.titles_rgiht{
							position: relative;
							display: flex;
							text{
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #767879;
								line-height: 28rpx;
								margin-right: 8rpx;
							}
							image{
								width: 32rpx;
								height: 32rpx;
								display: flex;
							}
						}
						.titles_rgihtok{
							animation: rotation 0.5s  forwards;
						}
						.titles_rgihtno{
							animation: rotatiyew 0.5s  forwards;
						}
						
						@keyframes rotation {
							 0% {
								 transform: rotate(0deg);
							 }
							 100% {
								  transform: rotate(180deg);
							 }
						}
						@keyframes rotatiyew {
							0% {
								transform: rotate(180deg);
							}
							100% {
								transform: rotate(0deg);
							}
						}
					}
					.main_list{
						padding: 24px 32rpx;
						padding-bottom: 0;
						.interior_title{
							display: flex;
							align-items: center;
							justify-content: space-between;
							view{
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #000000;
								line-height: 28rpx;
								&:first-child{
									text-decoration: underline;
								}
							}
						}
					    .checkstyle{
							margin-top: 23rpx;
							display: flex;
							align-items: center;
							image{
								width: 32rpx;
								height: 32rpx;
								display: block;
							}
							.check_right{
								flex: 1;
								margin-left: 32rpx;
								.check_title{
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #010101;
									line-height: 33rpx;
									margin-bottom: 4rpx;
								}
								.check_paratext{
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #767879;
									line-height: 28rpx;
								}
							}
						}
						.openNotification{
							background: #F8F8F8;
							z-index: 8;
							// background-color: red;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							padding: 24rpx;
							margin: 48rpx 0;
							.notificationTitle{
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								color: #010101;
								line-height: 28rpx;
								margin-bottom: 24rpx;
								text{
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #010101;
									line-height: 34rpx;
									display: inline-block;
									margin-left: 6rpx;
								}
							}
							.notificationlist{
								margin-bottom: 24rpx;
								display: flex;
								align-items: center;
								&:last-child{
									padding-bottom: 32rpx;
									border-bottom: 2rpx solid #D9D9D9;
								}
								image{
									width: 32rpx;
									height: 32rpx;
									display: block;
									margin-right: 16rpx;
								}
								.check_title{
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #010101;
									line-height: 43rpx;
								}
								.check_paratext{
									font-size: 20rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #767879;
									line-height: 23rpx;
									margin-left: 8rpx;
								}
							    
							}
							.selectPayment{
								padding-top: 32rpx;
								.selectPaymentTitle{
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									color: #010101;
									line-height: 28rpx;
									margin-bottom: 24rpx;
								}
								.selectlist{
									display: flex;
									align-items: center;
									margin-bottom: 24rpx;
									image{
										width: 26rpx;
										height: 26rpx;
										display: block;
										margin-right: 20rpx;
									}
									.select_title{
										flex: 1;
										font-size: 24rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										color: #010101;
										line-height: 43rpx;
									}
									.select_nmber{
										font-size: 28rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										color: #24458E;
										line-height: 33rpx;
									}
								}
								.select_all{
									flex: 1;
									.selectpays{
										display: flex;
										align-items: center;
										justify-content: space-between;
										margin-bottom: 12rpx;
										.selectpays_title{
											font-size: 24rpx;
											font-family: PingFang SC, PingFang SC;
											font-weight: 400;
											color: #010101;
											line-height: 43rpx;
										}
										.selectpays_nmber{
											font-size: 28rpx;
											font-family: PingFang SC, PingFang SC;
											font-weight: 500;
											color: #24458E;
										}
									}
									.selectpayfu{
										display: flex;
										align-items: center;
										justify-content: space-between;
										view{
											font-size: 24rpx;
											font-family: PingFang SC, PingFang SC;
											font-weight: 400;
											color: #797F81;
											line-height: 28rpx;
										}
									}
								}
							}
						}
						
					}
					.apystyle{
						width: 216rpx;
						text-align: center;
						height: 72rpx;
						background: #24458E;
						border-radius: 36rpx 36rpx 36rpx 36rpx;
						opacity: 1;
						margin: 0 auto;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 72rpx;
					}
				}
			}
		}
		
	}
</style>